<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Angelo｜西风抚髯影 - Simple Website Personal</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="Angelo｜西风抚髯影 - 个人网站" name="description">
    <meta content="BdgPixel" name="author">
    <!--Fav-->
    <link href="images/favicon.ico" rel="shortcut icon">
    <!--styles-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.theme.css" rel="stylesheet">
    <link href="css/magnific-popup.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <!--fonts google-->
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
       <script type="text/javascript" src="js/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <audio id="bgm" controls="loop" autoplay hidden>
      <source src="/images/001.mp3" type="audio/mpeg">
      <source src="/images/001.mp3" type="audio/mp3" />
      <embed src="/images/001.mp3">
      Your browser does not support the audio element.
    </audio>
    <!--PRELOADER-->
    <div id="preloader">
      <div id="status">
        <img alt="logo" src="images/logo-big.png">
      </div>
    </div>
    <!--/.PRELOADER END-->

    <!--HEADER -->
    <div class="header">
      <div class="for-sticky">
        <!--LOGO-->
        <div class="col-md-2 col-xs-6 logo">
          <a href="index.html"><img alt="logo" class="logo-nav" src="images/logo.png"></a>
        </div>
        <!--/.LOGO END-->
      </div>
      <div class="menu-wrap">
        <nav class="menu">
          <div class="menu-list">
            <a data-scroll="" href="#home" class="active">
              <span>Home｜主页</span>
            </a>
            <a data-scroll="" href="#about">
              <span>About｜关于</span>
            </a>
            <a data-scroll="" href="#work">
              <span>XiuXing｜修行</span>
            </a>
             <a data-scroll="" href="#services">
              <span>Service｜服务</span>
            </a>
            <a data-scroll="" href="#employement">
              <span>XiuXian|修仙</span>
            </a>
            <a data-scroll="" href="#skill">
              <span>Skills｜技能</span>
            </a>
            <a data-scroll="" href="#education">
              <span>Journey｜征途</span>
            </a>
            <a data-scroll="" href="#testimonial">
              <span>Testimonial</span>
            </a>
            <a data-scroll="" href="#blog">
              <span>Blog｜经书</span>
            </a>
            <a data-scroll="" href="#contact">
              <span>Contact｜联系我</span>
            </a>
          </div>
        </nav>
        <button class="close-button" id="close-button">Close Menu</button>
      </div>
      <button class="menu-button" id="open-button">
        <span></span>
        <span></span>
        <span></span>
      </button><!--/.for-sticky-->
    </div>
    <!--/.HEADER END-->

    <!--CONTENT WRAP-->
    <div class="content-wrap">
      <!--CONTENT-->
      <div class="content">
        <!--HOME-->
        <section id="home">
          <div class="container">
            <div class="row">
              <div class="wrap-hero-content">
                  <div class="hero-content">
                    <h1><span>你好！</span></h1>
                    <br>
                    <span class="typed"></span>
                  </div>
              </div>
              <div class="mouse-icon margin-20">
                <div class="scroll"></div>
              </div>
            </div>
          </div>
        </section>
        <!--/.HOME END-->

        <!--ABOUT-->
        <section id="about">
          <div class="col-md-6 col-xs-12 no-pad">
            <div class="bg-about"></div>
          </div>
          <div class="col-md-6 col-sm-12 col-xs-12 white-col">
            <div class="row">
              <!--OWL CAROUSEL2-->
              <div class="owl-carousel2">
                <div class="col-md-12">
                  <div class="wrap-about">
                    <div class="w-content">
                      <p class="head-about">
                        什么是梦想?梦想就是你每天不懈努力提升自我并为之奋斗而要实现的每一个目标的集成目标！当未来的你回首曾经自己努力奋斗的日子，那便是你打造的属于你自己的理想之路.....
                      </p>

                      <h5 class="name">
                        Angelo|西风抚髯影
                      </h5>
                      <img alt="signature" src="images/qianming.png">
                    </div>
                  </div>
                </div>

                <div class="col-md-12 col-sm-12 col-xs-12 white-col">
                  <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
                      <div class="wrap-about">
                        <table class="w-content">
                          <tr>
                            <td class="title">Name </td>
                            <td class="break">:</td>
                            <td> Angelo|西风抚髯影</td>
                          </tr>
                          <tr>
                            <td class="title">Phone </td>
                            <td class="break">:</td>
                            <td> +86 19941515517</td>
                          </tr>
                          <tr>
                            <td class="title">Email </td>
                            <td class="break">:</td>
                            <td> stvrandolph@icloud.com</td>
                          </tr>
                          <tr>
                            <td class="title">Address </td>
                            <td class="break">:</td>
                            <td> 江苏省南京市鼓楼区</td>
                          </tr>
                          <tr>
                            <td class="title">Skype </td>
                            <td class="WeChat">:</td>
                            <td> xi-kuang2410</td>
                          </tr>
                          <tr>
                            <td class="title">QQ </td>
                            <td class="break">:</td>
                            <td> 190486735</td>
                          </tr>
<!--                          <tr>-->
<!--                            <td class="title">Behance</td>-->
<!--                            <td class="break">:</td>-->
<!--                            <td> m-reza</td>-->
<!--                          </tr>-->
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--/.OWL CAROUSEL2 END-->
            </div>
          </div>
        </section>
        <!--/.ABOUT END-->

        <!--WORK-->
        <section class="grey-bg mar-tm-10" id="work">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <h3 class="title-small">
                  <span>修行</span>
                </h3>
                <p class="content-detail">
                  本仙在闭关修炼融合异火，望早日突破为斗帝 <br><br> 修炼之路艰苦异常，任重道远。
                </p>
              </div>
              <div class="col-md-9 content-right">
                <!--PORTFOLIO IMAGE-->
                <ul class="portfolio-image">
                  <li class="col-md-6">
                    <a href="images/bw-1.png"><img alt="image" src="images/bw-1.png">
                      <div class="decription-wrap">
                        <div class="image-bg">
                           <p class="desc">My Resume</p>
                        </div>

                      </div>
                    </a>
                  </li>
                  <li class="col-md-6">
                    <a href="images/bw-2.png"><img alt="image" src="images/bw-2.png">
                      <div class="decription-wrap">
                        <div class="image-bg">
                          <p class="desc">
                            Pangirutan
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="col-md-6">
                    <a href="images/bw-3.png"><img alt="image" src="images/bw-3.png">
                      <div class="decription-wrap">
                        <div class="image-bg">
                          <p class="desc">
                            Black Mug
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="col-md-6">
                    <a href="images/bw-4.png"><img alt="image" src="images/bw-4.png">
                      <div class="decription-wrap">
                        <div class="image-bg">
                          <p class="desc">
                            Notebook Mockup
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="col-md-6">
                    <a href="images/bw-5.png"><img alt="image" src="images/bw-5.png">
                      <div class="decription-wrap">
                        <div class="image-bg">
                          <p class="desc">
                            Presentation
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="col-md-6">
                    <a href="images/bw-6.png"><img alt="image" src="images/bw-6.png">
                      <div class="decription-wrap">
                        <div class="image-bg">
                          <p class="desc">
                            Letter Branding
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
                <!--/.PORTFOLIO IMAGE END-->
              </div>
            </div>
          </div>
        </section>
        <!--/.WORK END-->

        <!--SERVICES-->
        <section class="white-bg" id="services">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <h3 class="title-small">
                  <span>服务</span>
                </h3>
                <p class="content-detail">
                  服务至上，诚信服务！
                </p>
              </div>
              <div class="col-md-9 content-right">
                <div class="row">
                  <ul class="listing-item">
                    <li>
                      <div class="col-md-4 col-sm-4">
                        <h3 class="icon-use">
                          c
                        </h3>
                        <p class="head-sm">
                          系统开发
                        </p>
                        <p class="text-grey">
                          软件系统开发。
                        </p>
                      </div>
                    </li>

                    <li>
                      <div class="col-md-4 col-sm-4">
                        <h3 class="icon-use">
                          b
                        </h3>
                        <p class="head-sm">
                          网页设计
                        </p>
                        <p class="text-grey">
                          各类型网站设计。
                        </p>
                      </div>
                    </li>

                    <li>
                      <div class="col-md-4 col-sm-4">
                        <h3 class="icon-use">
                          d
                        </h3>
                        <p class="head-sm">
                          UI设计
                        </p>
                        <p class="text-grey">
                          系统、网站、APP等交互设计。
                        </p>
                      </div>
                    </li>
                  </ul>

<!--                  <ul class="listing-item">-->
<!--                    <li>-->
<!--                      <div class="col-md-4 col-sm-4">-->
<!--                        <p class="icon-use">-->
<!--                          f-->
<!--                        </p>-->
<!--                        <p class="head-sm">-->
<!--                          DIRECTOR-->
<!--                        </p>-->
<!--                        <p class="text-grey">-->
<!--                          Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem.-->
<!--                        </p>-->
<!--                      </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                      <div class="col-md-4 col-sm-4">-->
<!--                        <h3 class="icon-use">-->
<!--                          p-->
<!--                        </h3>-->
<!--                        <p class="head-sm">-->
<!--                          UX DESIGN-->
<!--                        </p>-->
<!--                        <p class="text-grey">-->
<!--                          Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem.-->
<!--                        </p>-->
<!--                      </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                      <div class="col-md-4 col-sm-4">-->
<!--                        <h3 class="icon-use">-->
<!--                          m-->
<!--                        </h3>-->
<!--                        <p class="head-sm">-->
<!--                          FRONT END-->
<!--                        </p>-->
<!--                        <p class="text-grey">-->
<!--                          Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem.-->
<!--                        </p>-->
<!--                      </div>-->
<!--                    </li>-->
                  </ul>

                </div>
              </div>
            </div>
          </div>
        </section>
        <!--/.SERVICES END-->

        <!--EMPLOYEMENT-->
        <section class="grey-bg" id="employement">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <h3 class="title-small">
                  <span>修行之路</span>
                </h3>
                <p class="content-detail">
                  修行不易，保持初心。
                </p>
              </div>
              <div class="col-md-9 content-right">
                <div class="row">
                  <ul class="listing-item">
                    <li>
                      <div class="col-md-6 col-sm-6">
                        <div class="wrap-card">
                          <div class="card">
                            <h2 class="year">
                              2012 - 2016
                            </h2>
                            <p class="job">
                              新手学员
                            </p>
                            <p class="company">
                              Corp Project
                            </p>
                            <hr>
                            <div class="text-detail">
                              <p>
                                在烟花之地入门修行之门.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>

                    <li>
                      <div class="col-md-6 col-sm-6">
                        <div class="wrap-card">
                          <div class="card">
                            <h2 class="year">
                              2016 - 至今
                            </h2>
                            <p class="job">
                              Java、web...soft developer
                            </p>
                            <p class="company">
                              X......
                            </p>
                            <hr>
                            <div class="text-detail">
                              <p>
                                欲知详情，请联系本仙。
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
<!--                  <ul class="listing-item">-->
<!--                    <li>-->
<!--                      <div class="col-md-6 col-sm-6">-->
<!--                        <div class="wrap-card">-->
<!--                          <div class="card">-->
<!--                            <h2 class="year">-->
<!--                              2010 - 2014-->
<!--                            </h2>-->
<!--                            <p class="job">-->
<!--                              crative director-->
<!--                            </p>-->
<!--                            <p class="company">-->
<!--                              41 studio-->
<!--                            </p>-->
<!--                            <hr>-->
<!--                            <div class="text-detail">-->
<!--                              <p>-->
<!--                                Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.-->
<!--                              </p>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                      <div class="col-md-6 col-sm-6">-->
<!--                        <div class="wrap-card">-->
<!--                          <div class="card">-->
<!--                            <h2 class="year">-->
<!--                              2014 - NOW-->
<!--                            </h2>-->
<!--                            <p class="job">-->
<!--                              fullstack designer-->
<!--                            </p>-->
<!--                            <p class="company">-->
<!--                              Freelance-->
<!--                            </p>-->
<!--                            <hr>-->
<!--                            <div class="text-detail">-->
<!--                              <p>-->
<!--                                Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.-->
<!--                              </p>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </li>-->
<!--                  </ul>-->

                </div>
              </div>
            </div>
          </div>
        </section>
        <!--/.EMPLOYEMENT END-->

        <!--SKILLS-->
        <section class="white-bg" id="skill">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <h3 class="title-small">
                  <span>技能</span>
                </h3>
                <p class="content-detail">
                  学无止境，技多不压身.
                </p>
              </div>
              <div class="col-md-9 content-right">
                <!--SKILLST-->
                <div class="skillst">
                  <div class="skillbar" data-percent="78%">
                    <div class="title head-sm">
                      前端开发-HTML 5、js、css、JQuery、Vue.js......
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                  <div class="skillbar" data-percent="91%">
                    <div class="title head-sm">
                      后端开发-Java、Spring Cloud、Mysql、Oracle、Redis......
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                  <div class="skillbar" data-percent="58%">
                    <div class="title head-sm">
                      移动端开发-uniapp......
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                  <div class="skillbar" data-percent="63%">
                    <div class="title head-sm">
                      桌面应用程序-JavaFx
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                  <div class="skillbar" data-percent="95%">
                    <div class="title head-sm">
                      交互设计-蓝狐、Axure......
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                  <div class="skillbar" data-percent="95%">
                    <div class="title head-sm">
                      摄影-各类型艺术写真......
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                  <div class="skillbar" data-percent="95%">
                    <div class="title head-sm">
                      占卜之术-熟读周易
                    </div>
                    <div class="count-bar">
                      <div class="count"></div>
                    </div>
                  </div>
                </div>
                <!--/.SKILLST END-->
              </div>
            </div>
          </div>
        </section>
        <!--/.SKILLS END-->

        <!--EDUCATION-->
<!--        <section class="grey-bg" id="education">-->
<!--          <div class="container">-->
<!--            <div class="row">-->
<!--              <div class="col-md-3">-->
<!--                <h3 class="title-small">-->
<!--                  <span>Education</span>-->
<!--                </h3>-->
<!--                <p class="content-detail">-->
<!--                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.-->
<!--                </p>-->
<!--              </div>-->
<!--              <div class="col-md-9 content-right">-->
<!--                <div class="row">-->
<!--                  <ul class="listing-item">-->
<!--                    <li>-->
<!--                      <div class="col-md-6 col-sm-6">-->
<!--                        <div class="wrap-card">-->
<!--                          <div class="card">-->
<!--                            <h2 class="year">-->
<!--                              2002 - 2005-->
<!--                            </h2>-->
<!--                            <p class="job">-->
<!--                              Information System-->
<!--                            </p>-->
<!--                            <p class="company">-->
<!--                              Telkom University-->
<!--                            </p>-->
<!--                            <hr>-->
<!--                            <div class="text-detail">-->
<!--                              <p>-->
<!--                                Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.-->
<!--                              </p>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                      <div class="col-md-6 col-sm-6">-->
<!--                        <div class="wrap-card">-->
<!--                          <div class="card">-->
<!--                            <h2 class="year">-->
<!--                              2005 - 2007-->
<!--                            </h2>-->
<!--                            <p class="job">-->
<!--                              DKV-->
<!--                            </p>-->
<!--                            <p class="company">-->
<!--                              UNIKOM-->
<!--                            </p>-->
<!--                            <hr>-->
<!--                            <div class="text-detail">-->
<!--                              <p>-->
<!--                                Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.-->
<!--                              </p>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </li>-->
<!--                  </ul>-->
<!--                  <ul class="listing-item">-->
<!--                    <li>-->
<!--                      <div class="col-md-6 col-sm-6">-->
<!--                        <div class="wrap-card">-->
<!--                          <div class="card">-->
<!--                            <h2 class="year">-->
<!--                              2007 - 2009-->
<!--                            </h2>-->
<!--                            <p class="job">-->
<!--                              Magister DKV-->
<!--                            </p>-->
<!--                            <p class="company">-->
<!--                              ITB-->
<!--                            </p>-->
<!--                            <hr>-->
<!--                            <div class="text-detail">-->
<!--                              <p>-->
<!--                                Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.-->
<!--                              </p>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </li>-->

<!--                    <li>-->
<!--                      <div class="col-md-6 col-sm-6">-->
<!--                        <div class="wrap-card">-->
<!--                          <div class="card">-->
<!--                            <h2 class="year">-->
<!--                              2009 - 2010-->
<!--                            </h2>-->
<!--                            <p class="job">-->
<!--                              Typhography Magister-->
<!--                            </p>-->
<!--                            <p class="company">-->
<!--                              Florida University-->
<!--                            </p>-->
<!--                            <hr>-->
<!--                            <div class="text-detail">-->
<!--                              <p>-->
<!--                                Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.-->
<!--                              </p>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </li>-->
<!--                  </ul>-->

<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </section>-->
        <!--/.EDUCATION END-->

        <!--TESTIMONIAL-->
        <section id="testimonial">
          <div class="container">
            <div class="row wrap-testimonial">
              <div class="col-md-10 col-md-offset-1">
                <div class="owl-carousel">
                  <div class="list-testimonial">
                    <div class="content-testimonial">
                      <h3 class="testi">
                        “ 西风抚髯影-傍晚时分，独自一个人站在海边，西风吹拂我美丽胡须，晚霞照射留影于沙滩...... ”
                      </h3>
                      <p class="people">
                        Angelo|西风抚髯影
                      </p>
                    </div>
                  </div>
                  <div class="list-testimonial">
                    <div class="content-testimonial">
                      <h3 class="testi">
                        “ 本仙个人小网站，感谢各位光临日月仙. ”
                      </h3>
                      <p class="people">
                        明仙人｜西狂
                      </p>
                    </div>
                  </div>
<!--                  <div class="list-testimonial">-->
<!--                    <div class="content-testimonial">-->
<!--                      <h3 class="testi">-->
<!--                        “ Great designer! I like his sense of design, especially the color scheme. Quick turnaround. Look forward to work with him again. Thanks!! ”-->
<!--                      </h3>-->
<!--                      <p class="people">-->
<!--                        JK Thang-->
<!--                      </p>-->
<!--                    </div>-->
<!--                  </div>-->
                </div>
              </div>
            </div>
          </div>
          <div class="mask-testimonial"></div>
        </section>
        <!--/.TESTMONIAL END-->

        <!--BLOG-->
        <section class="grey-bg" id="blog">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <h3 class="title-small-center text-center">
                  <span>经书</span>
                </h3>
                <div class="row">
                  <div class="col-md-6 col-md-offset-3">
                    <p class="content-details text-center">
                      敬请期待，大仙巨作《那些年的明仙》.
                    </p>
                  </div>
                </div>
                <!--Moving Heart-->
                <div class="grid">
                  <div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog-1" class="img-circle text-center" src="images/move_heart.png">
                      <p class="subtitle fancy">
                        <span>11/08/2023</span>
                      </p>
                      <a href="./moveHeart.html">
                        <h3 class="title">
                          激动的爱心｜Moving Hearts
                        </h3>
                      </a>
                      <p class="content-blog">
                        激动的心只因遇见你......
                      </p>
                    </div>
                  </div>
                  <!--Love Tree-->
                  <div class="grid-item">
                    <div class="wrap-article">
                     <img alt="blog-4" class="img-circle text-center" src="images/love-tree.png">
                     <p class="subtitle fancy">
                        <span>11/08/2023</span>
                      </p>
                      <a href="./loveTree.html">
                        <h3 class="title">
                          爱心树｜Love Tree
                        </h3>
                      </a>
                      <p class="content-blog">
                        爱心树因为你的爱而茁壮成长......
                      </p>
                    </div>
                  </div>
                  <!--流星雨爱心-->
                  <div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog6" class="img-circle text-center" src="images/starRainLove.png">
                      <p class="subtitle fancy">
                        <span>08/11/2023</span>
                      </p>
                      <a href="./startRainLove.html">
                        <h3 class="title">
                          流星雨爱心
                        </h3>
                      </a>
                      <p class="content-blog">
                       流星雨出现的时候，最想要的是你那颗心......
                      </p>
                    </div>
                  </div>
                  <!--跑动的爱-->
                  <div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog2" class="img-circle text-center" src="images/runningLove.png">
                      <p class="subtitle fancy">
                        <span>08/11/2023</span>
                      </p>
                      <a href="./runningLove.html">
                        <h3 class="title">
                          Running Love
                        </h3>
                      </a>
                      <p class="content-blog">
                        心跳不停，爱你不停......
                      </p>
                    </div>
                  </div>
                  <!--烟花-->
                  <div class="grid-item">
                    <div class="wrap-article">
                      <img alt="blog5" class="img-circle text-center" src="images/blog-5.jpg">
                      <p class="subtitle fancy">
                        <span>08/11/2023</span>
                      </p>
                      <a href="./yanHua.html">
                        <h3 class="title">
                          烟花｜fireworks
                        </h3>
                      </a>
                      <p class="content-blog">
                        烟花绽放.....
                      </p>
                    </div>
                  </div>

<!--                  <div class="grid-item">-->
<!--                    <div class="wrap-article">-->
<!--                      <img alt="blog-3" class="img-circle text-center" src="images/blog-3.jpg">-->
<!--                      <p class="subtitle fancy">-->
<!--                        <span>08/03/2015</span>-->
<!--                      </p>-->
<!--                      <a href="#">-->
<!--                        <h3 class="title">-->
<!--                          Somewhere Place-->
<!--                        </h3>-->
<!--                      </a>-->
<!--                      <p class="content-blog">-->
<!--                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.-->
<!--                      </p>-->
<!--                    </div>-->
<!--                  </div>-->

                </div>
                <!--/.GRID BLOG END-->
              </div>
            </div>
          </div>
        </section>
        <!--/.BLOG END-->

        <!--CONTACT-->
        <section id="contact" class="white-bg">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
                <h3 class="title-small">
                  <span>Contact|联系</span>
                </h3>
                <p class="content-detail">
                  有道友切磋请联系本仙.
                </p>

              </div>
              <div class="col-md-9 content-right">
                <form>
                  <div class="group">
                    <input required="" type="text"><span class="highlight"></span><span class="bar"></span><label>Name</label>
                  </div>
                  <div class="group">
                    <input required="" type="email"><span class="highlight"></span><span class="bar"></span><label>Email</label>
                  </div>
                  <div class="group">
                    <textarea required=""></textarea><span class="highlight"></span><span class="bar"></span><label>Message</label>
                  </div>
                  <input id="sendMessage" name="sendMessage" type="submit" value="Send Message">
                </form>
              </div>
            </div>
          </div>
        </section>
        <!--/.CONTACT END-->

        <!--FOOTER-->
        <footer>
          <div class="footer-top">
            <ul class="socials">
              <li class="facebook">
                <a href="#" data-hover="Facebook">Facebook</a>
              </li>
              <li class="twitter">
                <a href="#" data-hover="Twitter">Twitter</a>
              </li>
              <li class="gplus">
                <a href="#" data-hover="Google +">Google +</a>
              </li>
            </ul>
          </div>

          <div class="footer-bottom">
            <div class="container">
              <div class="row">
                <img src="images/logo-bottom.png" alt="logo bottom" class="center-block" />
              </div>
            </div>
          </div>
        </footer>
        <!--/.FOOTER-END-->

      <!--/.CONTENT END-->
      </div>
    <!--/.CONTENT-WRAP END-->
    </div>
<!--      <source src="./images/001.mp3" type="audio/mp3" />-->
<!--      <embed height="100" width="100" src="./images/001.mp3" />-->
    </audio>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.appear.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/classie.js" type="text/javascript"></script>
    <script src="js/owl.carousel.min.js" type="text/javascript"></script>
    <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
    <script src="js/masonry.js" type="text/javascript"></script>
    <script src="js/smooth-scroll.min.js" type="text/javascript"></script>
    <script src="js/typed.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <script type="text/javascript">
      function clickPlaySound() {
        var music = document.getElementById("bgm");//获取ID
        console.log(music);
        console.log(music.paused);
        if (music.paused) { //判读音频是否播放
          music.paused=true;
          music.play(); //如果没有播放就开始播放
        }
      }
      setInterval("clickPlaySound()",10000);
    </script>
  </body>
</html>
